<template>
    <div>
        <img :src="newtext1.src1" alt="" class="cebiananniu" @click="showPopup"/>
        <van-popup v-model="show"  position="left" :style="{ height: '100%', width: '80%' }">
          <div class="cebianlan" style="background-image: url(./img/cebian/cebian00.jpg),url(./img/cebian/cebian08.jpg);">
            <div class="bianji">
              <img :src="newtext1.src2" alt="" />
            </div>
            <div class="touxiang">
              <img :src="newtext1.src3" alt="" />
            </div>
            <div class="xingming"><span>{{newtext1.text1}}</span></div>
            <div><img :src="newtext1.src4" alt="" /></div>
            <div class="cebianlan-3" v-for="(item,index) in newtext2" :key="index"  v-on:click="fun(item.fun)">
              <img :src="item.src" alt="" /><span>{{item.text1}}</span>
            </div>
          </div>
        </van-popup>
        
    </div>
</template>

<script>
export default {
   data() {
    return {
      show: false,
      active: 2,
    };
  },
  methods: {
    showPopup() {
       this.show = true;
    },
    fun(i){
      console.log(i);
      this.$router.push(i)
    }
  },
  created(){
    return this.$store.dispatch("cebianH",{url:"cebian"})
  },
  computed:{
    newtext1(){
      return this.$store.state.cebian.text1
    },
    newtext2(){
      return this.$store.state.cebian.text2
    }
  }
}
</script>

<style scoped>
.cebiananniu {
  height: 0.2rem;
}
.cebianlan {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat,no-repeat;
  background-position:top,bottom;
  background-size: 100%;
  overflow: hidden;
}

.touxiang {
  width: 1rem;
  height: 1rem;
  background-color: pink;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 0.6rem;
}
.touxiang > img,
.bianji > img {
  width: 100%;
}
.bianji {
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  right: 0.1rem;
  top: 0.3rem;
}
.xingming {
  text-align: center;
  margin-top: 0.1rem;
}
.cebianlan > div:nth-child(4) {
  margin: .1rem;
}
.cebianlan > div:nth-child(4) > img {
  width: 100%;
}
.cebianlan-3 {
  height: 0.3rem;
  margin: .2rem 0 0 .2rem;
}
.cebianlan-3 > img {
  height: 100%;
  vertical-align: middle;
  width: 0.3rem;
  margin-right: 0.05rem;
}
</style>